import React, { useState, useRef } from 'react';
import { connect } from 'react-redux';
import { PlusOutlined, FileImageOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Col, Row, Switch, Tooltip } from 'antd';
import { history } from 'umi';
import timestampToTime from '../../hooks/data';
import LazyLoad from 'react-lazyload';
import './wq.less';
interface Props {}

function Oldhouse({ houselist, dispatch }: any) {
  const gotobianji = (record: any) => {
    history.push('/index/Home/bianji', {
      state: record,
    });
  };
  const gotoadd = () => {
    history.push('/index/Home/house');
  };
  const del = (record: any) => {
    dispatch({ type: 'index/DEL', payload: record });
  };
  const inp: any = useRef();

  const sou = () => {
    console.log(inp.current.value);
    dispatch({
      type: 'index/SOU',
      payload: inp.current.value,
    });
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '楼盘名称',
      dataIndex: 'title',
      render: (item: any, info: any) => {
        const img =
          info.rec_position === 1 ? (
            <img
              src="http://fangadmin.shbwyz.com/static/images/rec.png"
              alt=""
            />
          ) : (
            ''
          );
        return (
          <React.Fragment>
            {item}
            <Tooltip
              title={
          
                  <LazyLoad>
                    <img
                      style={{ height: 60 }}
                      src={`http://fangadmin.shbwyz.com${info.img}`}
                    ></img>
                  </LazyLoad>
        
              }
            >
              <FileImageOutlined style={{ margin: '0,5' }} />
            </Tooltip>
            {img}
          </React.Fragment>
        );
      },
    },
    {
      title: '所属区域',
      dataIndex: 'address',
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: (item) => {
        return item === 0 ? <span>待定</span> : <span>{item}元/㎡</span>;
      },
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      render: (item) => {
        return timestampToTime(item);
      },
    },
    {
      title: '排序',
      dataIndex: 'hits',
      sorter: (a, b) => a.hits - b.hits,
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (item) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 0 ? false : true}
          />
        );
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => {
        return (
          <React.Fragment>
            <Row gutter={[8, 8]}>
              <Col>
                <Button
                  size="small"
                  style={{ backgroundColor: '#009688', color: '#fff' }}
                >
                  户型
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  style={{ backgroundColor: '#009688', color: '#fff' }}
                >
                  相册
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  style={{ backgroundColor: '#009688', color: '#fff' }}
                >
                  动态
                </Button>
              </Col>
            </Row>
            <Row gutter={[8, 8]} style={{ marginTop: 10 }}>
              <Col>
                <Button
                  size="small"
                  style={{ backgroundColor: '#009688', color: '#fff' }}
                >
                  沙盘
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => gotobianji(record)}
                  style={{ backgroundColor: '#009688', color: '#fff' }}
                >
                  编辑
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => del(record)}
                  style={{ backgroundColor: 'red', color: '#fff' }}
                >
                  删除
                </Button>
              </Col>
            </Row>
          </React.Fragment>
        );
      },
    },
  ];
  const actionRef = useRef<ActionType>();
  return (
    <div>
      <ProTable<any>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        rowSelection={rowSelection}
        dataSource={houselist}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        rowKey="id"
        search={false}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <div>
            {' '}
            <input type="text" placeholder="请输入你想知道的楼盘" ref={inp} />
            <Button onClick={sou}>搜索</Button>
          </div>,
          <Button onClick={gotoadd} icon={<PlusOutlined />} type="primary">
            新建
          </Button>,
        ]}
      />
    </div>
  );
}

const mapStateToProps = ({ index: { houselist } }: any) => ({
  houselist,
});

export default connect(mapStateToProps)(Oldhouse);
